

<template>
<div class="population detailedParent">
  <div class="detailed"><img src="../../../public/detailed.svg" alt="放大" @click="dialogVisible = true"></div>
  <div id="population-main"></div>
</div>
  <el-dialog v-model="dialogVisible" title="图表详情" width="80vw" height="height">
    <div>
      <DetailedPopulation></DetailedPopulation>
    </div>
  </el-dialog>
</template>

<style scoped>
.population{
  width: 100%;
  height: 100%;
}

#population-main{
  width: 100%;
  height: 100%;
}
</style>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import {getPopulationByProvinceName, getTotalPopulation} from "@/api/population.js";
import emitter from "@/utils/emitter.js";
import {detailedPopulationEvent, mapChanged} from "@/consts/eventName.js";
import DetailedRate from "@/components/DemographicCharacteristics/detailed/DetailedRate.vue";
import DetailedPopulation from "@/components/DemographicCharacteristics/detailed/DetailedPopulation.vue";
import {useDetailedStore} from "@/store/useDetailedStore.js";
import theme from "../../../static/theme/walden.json"

let chartDom
let myChart
let option;
let dialogVisible = ref(false)

onMounted(()=>{
  chartDom = document.getElementById('population-main');
  myChart = echarts.init(chartDom,theme);

  getTotalPopulation().then((value)=>{
    let data = createValue(value)
    useDetailedStore().detailedData.set(detailedPopulationEvent,data)
    return data
  }).then((value)=>{
    option = createOption(value)
    option && myChart.setOption(option,theme);
  })
})

emitter.on(mapChanged,(value)=>{
  if (value === 'china'){
    getTotalPopulation().then((value)=>{
      let data = createValue(value)

      if (useDetailedStore().detailedLoadFlag.get(detailedPopulationEvent)){
        emitter.emit(detailedPopulationEvent,data)
      }else {
        useDetailedStore().detailedData.set(detailedPopulationEvent,data)
      }

      return data
    }).then((value)=>{
      option = createOption(value)
      option && myChart.setOption(option);
    })
  }else {
    getPopulationByProvinceName(value).then((value)=>{
      let data = createValue(value)

      if (useDetailedStore().detailedLoadFlag.get(detailedPopulationEvent)){
        emitter.emit(detailedPopulationEvent,data)
      }else {
        useDetailedStore().detailedData.set(detailedPopulationEvent,data)
      }
      return data
    }).then((value)=>{
      option = createOption(value)
      option && myChart.setOption(option);
    })
  }

})


function createValue(value){
  let data = value.data
  let xAxisData = []
  let seriesData = []

  data.forEach((item)=>{
    const jsonMap = new Map(Object.entries(item));
    xAxisData.push(jsonMap.keys().next().value)
    seriesData.push(jsonMap.values().next().value)
  })

  return {
    xAxisData:xAxisData,
    seriesData:seriesData
  }
}

function createOption(value){
  return {
    title: {
      text: '人口数量(万人)',
      left: 10
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '1%',
      top: '23%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: value.xAxisData.reverse()
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '人口数',
        type: 'line',
        stack: 'Total',
        data: value.seriesData.reverse()
      },
    ]
  };
}

</script>